<template>
	<view class="home">
		<view class="header">
			<view class="header-left">工作台</view>
			<view class="header-right">
				<image src="../../static/inform/Union.png" mode=""></image>
			</view>
		</view>
		<view class="tabs">
			<view class="tab" v-for="item in list" :key="item.id">
				<view class="tabn">
					<view class="img">
						<image :src="item.url" mode=""></image>
					</view>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="content">
			<div class="content-left">
				<view class="list" :class="{bgc: isShow == item.id}" @click="navcut(item.id)" v-for="item in list1" :key="item.id">
					<text :class="{black: isShow == item.id}">{{item.name}}</text>
				</view>
			</div>
			<div class="content-right">
				<view class="realtime" v-show="isShow == 1">
					<view class="list" @click="realtime(item.id)" v-for="item in realtimeList" :key="item.id">
						<view class="list-left">
							<image :src="item.url" mode=""></image>
						</view>
						<view class="list-right">
							<view class="title">
								<text>{{item.title}}</text>
							</view>
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>
				<view class="operation box" v-show="isShow == 2">
					<view class="box-list" v-for="item in operationList" :key="item.id" @click="btn(item.id)">
						<view class="img">
							<image :src="item.url" mode=""></image>
						</view>
						<text>{{item.name}}</text>
					</view>
				</view>
				<view class="polling box" v-show="isShow == 3">
					<view class="box-list" v-for="item in pollingList" :key="item.id">
						<view class="img">
							<image :src="item.url" mode=""></image>
						</view>
						<text>{{item.name}}</text>
					</view>
				</view>
				<view class="examination box" v-show="isShow == 4">
					<view class="box-list" @click="examination(item.id)" v-for="item in examinationList" :key="item.id">
						<view class="img">
							<image :src="item.url" mode=""></image>
						</view>
						<text>{{item.name}}</text>
					</view>
				</view>
				<view class="cultivate box" v-show="isShow == 5">
					<view class="box-list" @click="cultivate(item.id)" v-for="item in cultivateList" :key="item.id">
						<view class="img">
							<image :src="item.url" mode=""></image>
						</view>
						<text>{{item.name}}</text>
					</view>
				</view>
				<view class="risk box" v-show="isShow == 6">
					<view class="box-list" @click="risk(item.id)" v-for="item in riskList" :key="item.id">
						<view class="img">
							<image :src="item.url" mode=""></image>
						</view>
						<text>{{item.name}}</text>
					</view>
				</view>
				<view class="equipment box" v-show="isShow == 7">
					<view class="box-list" v-for="item in equipmentList" :key="item.id">
						<view class="img">
							<image :src="item.url" mode=""></image>
						</view>
						<text>{{item.name}}</text>
					</view>
				</view>
				<view class="hiddendanger box" v-show="isShow == 8">
					<view class="box-list" v-for="item in hiddendangerList" :key="item.id" @click="gorectified(item.id)">
						<view class="img">
							<image :src="item.url" mode="" ></image>
						</view>
						<text>{{item.name}}</text>
					</view>
				</view>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					id:1,
                    name: '作业票办票',
					url:'../../static/inform/jobslip.png'
                }, {
					id:2,
                    name: '待巡检',
					url:'../../static/inform/forchecking.png'
                }, {
					id:3,
                    name: '视频教程',
					url:'../../static/inform/video.png'
                }, {
					id:4,
                    name: '每日研判',
					url:'../../static/inform/studyandjudge.png'
                }, {
					id:5,
                    name: '待整改隐患',
					url:'../../static/inform/pctz.png'
                }, {
					id:6,
                    name: '我的证书',
					url:'../../static/inform/fptz.png'
                }],
				list1:[
					{
						id:1,
						name:"实时通知"
					},{
						id:2,
						name:"特殊作业"
					},{
						id:3,
						name:"智能巡检"
					},{
						id:4,
						name:"在线考试"
					},{
						id:5,
						name:"教育培训"
					},{
						id:6,
						name:"风险研判"
					},{
						id:7,
						name:"设备设施"
					},{
						id:8,
						name:"隐患治理"
					},
				],
				isShow:1,
				realtimeList:[
					{
						id:1,
						name:"点击进入巡检",
						title:"巡检中……",
						url:'../../static/inform/xjz.png'
					},{
						id:2,
						name:"点击进入监护",
						title:"特殊作业进行中……",
						url:'../../static/inform/tszyjxz.png'
					},{
						id:3,
						name:"点击进入考试",
						title:"考试中……",
						url:'../../static/inform/ksz.png'
					},{
						id:4,
						name:"您有一个安全风险事件待复评",
						title:"复评通知",
						url:'../../static/inform/fptz.png'
					},{
						id:5,
						name:"您有一个巡检计划即将开始",
						title:"巡检通知",
						url:'../../static/inform/xjtz.png'
					},{
						id:6,
						name:"您有一个隐患待排查",
						title:"排查通知",
						url:'../../static/inform/pctz.png'
					},{
						id:7,
						name:"您有一个隐患待整改",
						title:"整改通知",
						url:'../../static/inform/zgtz.png'
					},{
						id:8,
						name:"您有一条变更信息待审核",
						title:"审核通知",
						url:'../../static/inform/shtz.png'
					},{
						id:9,
						name:"您有一条隐患待排查",
						title:"验收通知",
						url:'../../static/inform/ystz.png'
					},{
						id:10,
						name:"您有一场考试即将开始",
						title:"考试通知",
						url:'../../static/inform/kstz.png'
					},{
						id:11,
						name:"您有一个培训活动即将开始",
						title:"培训通知",
						url:'../../static/inform/pxtz.png'
					},{
						id:12,
						name:"您有一门课程待学习",
						title:"课程通知",
						url:'../../static/inform/kctz.png'
					},{
						id:13,
						name:"发生一级报警，点击查看详情！",
						title:"报警通知",
						url:'../../static/inform/bjtz.png'
					}
				],
				operationList:[
					{
						id:1,
						name:"作业票办票",
						url:'../../static/operation/zypbp.png'
					},{
						id:2,
						name:"作业票审批",
						url:'../../static/operation/zypps.png'
					},{
						id:3,
						name:"作业监护",
						url:'../../static/operation/zyjh.png'
					},{
						id:4,
						name:"作业验收",
						url:'../../static/operation/zyys.png'
					}
				],
				pollingList:[
					{
						id:1,
						name:"待巡检",
						url:'../../static/operation/dxj.png'
					},{
						id:2,
						name:"巡检记录",
						url:'../../static/operation/xjjl.png'
					}
				],
				examinationList:[
					{
						id:1,
						name:"参加考试",
						url:'../../static/operation/cjks.png'
					},{
						id:2,
						name:"我的成绩",
						url:'../../static/operation/wdcj.png'
					}
				],
				cultivateList:[
					{
						id:1,
						name:"PDF教程",
						url:'../../static/operation/pdfjc.png'
					},{
						id:2,
						name:"视频教程",
						url:'../../static/operation/spjc.png'
					},{
						id:3,
						name:"培训活动",
						url:'../../static/operation/pxhd.png'
					}
				],
				riskList:[
					{
						id:1,
						name:"每日研判",
						url:'../../static/operation/mryp.png'
					},{
						id:2,
						name:"研判记录",
						url:'../../static/operation/ypjl.png'
					}
				],
				equipmentList:[
					{
						id:1,
						name:"设备检查",
						url:'../../static/operation/sbjc.png'
					},{
						id:2,
						name:"设备检测",
						url:'../../static/operation/sbjc1.png'
					},{
						id:3,
						name:"设备保养",
						url:'../../static/operation/sbby.png'
					},{
						id:4,
						name:"设备维修",
						url:'../../static/operation/sbwx.png'
					},{
						id:5,
						name:"设备维修",
						url:'../../static/operation/sbty.png'
					},{
						id:6,
						name:"设备维修",
						url:'../../static/operation/sbhf.png'
					},{
						id:7,
						name:"设备维修",
						url:'../../static/operation/sbbf.png'
					}
				],
				hiddendangerList:[
					{
						id:1,
						name:"待整改隐患",
						url:'../../static/operation/dzgyh.png'
					},{
						id:2,
						name:"待验收隐患",
						url:'../../static/operation/dysyh.png'
					}
				],
			}
		},
		onLoad() {

		},
		methods: {
			click(item) {
                // console.log('item', item);
            },
			navcut(val){
				this.isShow = val
			},
			// 实时通知
			realtime(val){

				// console.log(val);
				if(val == 1){
					uni.navigateTo({
						url:'/pages/intheinspection/intheinspection'
					})
				}else if(val == 2){
					uni.navigateTo({
						url:'/pages/specialassignments/specialassignments'
					})
				}else if(val == 3){
					uni.navigateTo({
						url:'/pages/duringtheexamination/duringtheexamination'
					})
				}
			},
			// 在线考试页面跳转
			examination(val){
				console.log(val);
				if(val == 1){
					uni.navigateTo({
						url:'/pages/totakenexamination/totakenexamination'
					})
				}else if(val == 2){
					uni.navigateTo({
						url:'/pages/mygrade/mygrade'
					})
				}
			},
			// 教育培训
			cultivate(val){
				// console.log(val);
				if(val == 1){
					uni.navigateTo({
						url:'/pages/pdfcourse/pdfcourse'
					})
				}else if(val == 2){
					uni.navigateTo({
						url:'/pages/videocourse/videocourse'
					})
				}else if(val == 3){
					uni.navigateTo({
						url:'/pages/trainactivity/trainactivity'
					})
				}
			},
			// 风险研判页面跳转
			risk(val){
				// console.log(val);
				if(val == 1){
					uni.navigateTo({
						url:'/pages/everyday/everyday'
					})
				}else if(val == 2){
					uni.navigateTo({
						url:'/pages/studyandjudge/studyandjudge'
					})
				}
			},
			btn(id){
				console.log(id)
				if(id==1){
					uni.navigateTo({
						url:'/pages/operationTicket/index/index'
					})
				}else if(id==2){
					uni.navigateTo({
						url:'/pages/approval/index/index'
					})
				}else if(id==3){
					uni.navigateTo({
						url:'/pages/operationTicket/index/index'
					})
				}else if(id==4){
					uni.navigateTo({
						url:'/pages/operationTicket/index/index'
					})
				}
			}

			gorectified(val){
				// console.log(val,123);
				if(val==1){
					uni.navigateTo({
						url:'/pages/rectified/rectified'
					})
				}else if(val==2){
					uni.navigateTo({
						url:'/pages/acceptancecheck/acceptancecheck'
					})
				}
			}


		}
	}
</script>

<style lang="scss">
	.home {
		.header{
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			padding: 0 48rpx;
			box-sizing: border-box;
			background: #1989FA;
			display: flex;
			justify-content:space-between;

			.header-left{
				flex: 1;
				font-size: 40rpx;
				color: #fff;
				font-weight: bold;
			}
			.header-right{
				flex: 1;
				text-align: right;
				image{
					margin-top: 26rpx;
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
		.tabs{
			width: 750rpx;
			height: 188rpx;
			padding: 0 0 0 20rpx;
			background: #1989FA;
			overflow-x: auto;
			display: flex;
			.tab{
				height: 188rpx;
				margin-top: 32rpx;
				margin-right: 20rpx;
				text-align: center;
				.tabn{
					width: 150rpx;
					.img{
						width: 80rpx;
						height: 80rpx;
						margin: 0 auto;
						image{
							width: 80rpx;
							height: 80rpx;
						}
					}
					text{
						font-size: 24rpx;
						color: #fff;
					}
				}

			}

		}
		.content{
			width: 750rpx;
			display: flex;
			.content-left{
				width: 208rpx;
				height: 1260rpx;
				background: #F6F6F6;
				.list{
					width: 208rpx;
					height: 124rpx;
					line-height: 124rpx;
					text-align: center;
					text{
						font-size: 28rpx;
						color: #999;
					}
					.black{
						color: #333333;
						font-weight: bold;
					}
				}
				.bgc{
					background: #fff;
				}
			}
			.content-right{
				width: 542rpx;
				// height: 1260rpx;
				padding: 24rpx 22rpx 24rpx 24rpx;
				box-sizing: border-box;
				.realtime{
					.list{
						width: 496rpx;
						height: 144rpx;
						background-color: #F6F6F6;
						padding: 22rpx 0 22rpx 24rpx;
						box-sizing: border-box;
						margin-bottom: 16rpx;
						display: flex;
						.list-left{
							width: 100rpx;
							height: 100rpx;
							border-radius: 36rpx;
							background-color: #fff;
							image{
								width: 100%;
								height: 100%;
							}
						}
						.list-right{
							margin-left: 16rpx;
							text{
								color: #666666;
								font-size: 24rpx
							}
							.title{
								text{
									color: #333333;
									font-size: 32rpx
								}
							}
						}
					}
				}

				.box{
					display: flex;
					flex-wrap:wrap;
					justify-content:space-between;
					.box-list{
						width: 240rpx;
						height: 240rpx;
						background-color: #F6F6F6;
						margin-bottom: 16rpx;
						text-align: center;
						.img{
							margin: 0 auto;
							margin-top: 38rpx;
							width: 120rpx;
							height: 120rpx;
							display: flex;
							justify-content:center;
							align-items:center;
							background-color: #fff;
							border-radius: 50%;
							image{
								width: 64rpx;
								height: 64rpx;
							}
						}
						text{
							color: #666666;
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}

</style>
